<template>
	<view class="tab-content" :style="{ backgroundColor: backgroundColor }">
		<!-- <scroll-view class="scroll-view" scroll-x> -->
		<view class="tabs-list" :style="{ backgroundColor: backgroundColor }">
			<view v-for="(item, index) in tabsListConfig" :key="index" class="tabs-item"
				@click="handleClick(item.name)">
				<view v-if="checkPermit(item.hasPermit) || ['*:*:*']"
					:class="['tab-item', active === item.name ? 'active-item' : '']" :style="{
              color: active === item.name ? tabActiveColor : tabItemColor,
              fontSize: active === item.name ? tabActiveSize : '28rpx'
            }">
					<view class="item">{{ item.label }}</view>
					<view class="line-box" :style="{ width: bottomLineWidth }">
						<view class="label-line" :style="{
                  backgroundColor: bottomLineColor,
                  borderRadius: lineBorderRadius
                }" v-if="active === item.name"></view>
					</view>
				</view>
			</view>
		</view>
		<!-- </scroll-view> -->
		<view class="open-box" v-if="showMoreTab" @click="showMore">
			展开<uni-icons type="bars" color="#000" class="icon"></uni-icons>
		</view>
		<view class="more-tab" v-if="showMoreContent">
			<view class="more-title">{{ moreTabTitle }}</view>
			<view class="row-start">
				<view :class="[item.name == activeName? 'more-item_active' : 'more-item']"
					v-for="(item, index) in tabsListConfig" :key="index" @click="handleClick(item.name)">
					{{ item.label }}</view>
			</view>
		</view>
		<view class="mask" v-if="showMoreContent"></view>
	</view>
</template>

<script>
	import {
		checkPermit
	} from "@/utils/permission"; // 权限判断函数
	export default {
		name: 'YouTabs',
		data() {
			return {
				tabsListConfig: [],
				active: '',
				listHeight: '',
				checkPermit,
				showMoreContent: false
			}
		},
		props: {
			activeName: {
				type: [Number, String],
				default: ''
			},
			fontSize: {
				type: String,
				default: '28rpx'
			},
			tabsList: {
				type: Array,
				default: []
			},
			backgroundColor: { // 背景色
				type: String,
				default: '#FFF'
			},
			tabItemColor: { // 单个tab的字体色
				type: String,
				default: '#808080'
			},
			tabActiveColor: { // 单个tab选中的字体色
				type: String,
				default: '#000'
			},
			tabActiveSize: {
				type: String,
				default: '28rpx'
			},
			bottomLineColor: { // 下划线的颜色
				type: String,
				default: '#126352'
			},
			bottomLineWidth: {
				type: String,
				default: '65%'
			},
			lineBorderRadius: {
				type: String,
				default: '2rpx'
			},
			showMoreTab: {
				type: Boolean,
				default: false
			},
			moreTabTitle: {
				type: String,
				default: '门店分类'
			}
		},
		computed: {},
		watch: {
			activeName: {
				handler(newVal, oldVal) {
					this.active = newVal
				},
				deep: true,
				immediate: true
			},
			tabsList: {
				handler(newVal, oldVal) {
					this.tabsListConfig = [...newVal]
					this.getActive()
				},
				deep: true
			}
		},
		created() {
			this.tabsListConfig = uni.$u.deepClone(this.tabsList)
			this.active = this.activeName
			this.getActive()
		},
		methods: {
			checkScroll() {
				if (!this.$refs.tabList) return
				const box = this.$refs.tabList
				const hasHorizontalScrollbar = box.scrollWidth > box.clientWidth

				if (hasHorizontalScrollbar) {
					this.listHeight = '38px'
				} else {
					this.listHeight = '42px'
				}
			},
			getActive() {
				const permissionFlag = []
				this.tabsListConfig.forEach(item => {
					if (item.hasPermit) {
						permissionFlag.push(item.hasPermit[0])
					}
				})
				if (permissionFlag.length === 0) return
				const permissions = uni.getStorageSync('userInfo').permissions
				if (permissions[0] === '*:*:*') {
					return
				}

				const hasPermissions = permissions.filter(permission => {
					return permissionFlag.includes(permission)
				})

				this.tabsListConfig = this.tabsListConfig.filter(item => {
					if (item.hasPermit) {
						return hasPermissions.includes(item.hasPermit[0])
					}
				})
				if (this.tabsListConfig.length === 0) return
				this.active = this.tabsListConfig[0].name
				this.handleClick(this.active)
			},
			showMore() {
				this.showMoreContent = !this.showMoreContent
			},
			handleClick($event) {
				this.showMoreContent = false
				this.$emit('tabClick', $event)
			}
		}
	}
</script>

<style lang='scss' scoped>
	@import '@/static/scss/uni.scss';

	.tab-content {
		position: relative;
		width: 100%;
		height: 80rpx;
		padding-bottom: 16rpx;
		margin-bottom: 10rpx;
	}

	.scroll-view {
		white-space: nowrap;
		width: 100%;
	}

	.open-box {
		position: absolute;
		top: 0;
		right: 0;
		display: flex;
		align-items: center;
		height: 80rpx;
		padding: 0 24rpx;
		/* border-left: 2rpx solid #E0E0E0; */
		background-color: #FFF;

		.icon {
			margin-left: 8rpx;
		}
	}

	.tabs-list {
		height: 80rpx;
		display: flex;
		/* justify-content: space-around; */
		align-items: center;
		background-color: #fff;
		overflow-x: auto;
		padding-right: 150rpx;

		/* padding: 0 150rpx 0 20rpx; */
		.tabs-item {
			display: inline-block;
			min-width: 120rpx;

			.tab-item {
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
			}

			.active-item {
				font-weight: bold;
			}

			.line-box {
				position: absolute;
				left: 50%;
				bottom: -16rpx;
				height: 8rpx;
				transform: translateX(-50%);

				.label-line {
					width: 100%;
					height: 4rpx;
					animation: scaleAnimation .3s linear;
				}
			}
		}
	}

	.mask {
		position: absolute;
		top: 80rpx;
		width: 100%;
		height: 100vh;
		background-color: #333333;
		opacity: .6;
		z-index: 90;
	}

	.more-tab {
		position: absolute;
		top: 80rpx;
		left: 0;
		width: 100%;
		min-height: 300upx;
		padding-bottom: 40upx;
		background-color: #ffffff;
		z-index: 99;

		.more-title {
			width: 100%;
			padding-left: 40upx;
			font-size: 30upx;
			font-weight: 700;
		}

		.more-item {
			/* padding: 10upx 20upx; */
			width: 30%;
			height: 50upx;
			line-height: 50upx;
			text-align: center;
			color: #333333;
			border: 1upx solid #808080;
			border-radius: 10upx;
			margin: 10upx;
		}

		.more-item_active {
			/* padding: 10upx 20upx; */
			width: 30%;
			height: 50upx;
			line-height: 50upx;
			text-align: center;
			color: #ffffff;
			border: 1upx solid #0b3f35;
			background-color: #0b3f35;
			border-radius: 10upx;
			margin: 10upx;
		}
	}

	@keyframes scaleAnimation {
		0% {
			transform: scale(0);
		}

		100% {
			transform: scale(1);
		}
	}
</style>